<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>

     <!--
        0.键盘事件 keyup:键盘按下后升起来触发,keydown:键盘按下后就出发

        1.Vue中常用的按键别名：
            回车 => enter
            删除 => delete (捕获“删除”和“退格”键)
            退出 => esc
            空格 => space
            换行 => tab (特殊，必须配合keydown去使用)
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 name-case（短横线命名）

        3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
            (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
            (2).配合keydown使用：正常触发事件。

        4.也可以使用keyCode去指定具体的按键（不推荐）

        5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
    -->
    <div id="app">
        <input @keyup.enter="test" type="text">
        <input @keydown.ctrl="test2" type="text2">
        <!-- name-case（短横线命名） -->
        <input @keydown.caps-lock="test2" type="text2">
    </div>


    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    property: 'value',
                };
            },
            methods:{
                test(event){
                    console.log(event.keyCode);
                    console.log("test1");
                },
                test2(event){
                    console.log(event.key);
                    console.log(event.keyCode);
                    console.log("test2");
                },
            }
        })
    </script>
</body>
</html>